/**
  date: 2019年6月24日09:32:11
  latest update: 2019年6月29日16:31:48
  desc: 评估绘图建项弹框
 */
<template>
  <div class="amap-assessment">
    <el-dialog title="存储项目" :visible.sync="outerVisible">
      <el-form
        label-position="right"
        label-width="140px"
        :model="formAssessment"
        :rules="rules"
        ref="formAssessment"
      >
        <el-form-item label="项目名称:" class="form-content" prop="name">
          <el-input v-model="formAssessment.name" placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="项目内部编号:" class="form-content" prop="num">
          <el-input v-model="formAssessment.num" placeholder="请输入内部编号"></el-input>
        </el-form-item>
        <el-form-item label="项目四级地址:" class="form-content" prop="address_one">
          <el-input v-model="formAssessment.address_one" placeholder="请输入四级地址"></el-input>
        </el-form-item>
        <el-form-item label="项目五级地址:" class="form-content" prop="address_two">
          <el-input v-model="formAssessment.address_two" placeholder="请输入四级地址"></el-input>
        </el-form-item>
        <el-form-item label="项目类别:" class="form-content" prop="type">
          <el-select v-model="formAssessment.type" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图纸上传:">
          <!-- TODO: 图纸上传 -->
          <el-upload class="upload-demo" :headers="myheader" action multiple :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">文件大小不能超过10M!</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确认</el-button>
        </el-form-item>
      </el-form>

      <el-dialog width="30%" title="提示" :visible.sync="innerVisible" append-to-body>
        <div>确认无误,点击确认开始上传信息.</div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <!-- TODO: 内层确认用户上传数据 -->
          <el-button type="primary" @click="handleUpdate">确认</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'amapAssessment',
  data() {
    return {
      myheader: { token: localStorage.getItem('token') },
      fileList: [
        // {
        //   name: 'food.jpeg',
        //   url:
        //     'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }
      ],
      outerVisible: false,
      innerVisible: false,
      options: [
        {
          value: 1,
          lebel: '1'
        },
        {
          value: 2,
          lebel: '2'
        }
      ],
      formAssessment: {
        name: '',
        num: '',
        address_one: '',
        address_two: '',
        type: ''
      },
      // 验证
      rules: {
        name: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        num: [{ required: true, message: '内部编号不能为空', trigger: 'blur' }],
        address_one: [
          { required: true, message: '项目四级地址不能为空', trigger: 'blur' }
        ],
        address_two: [
          { required: true, message: '项目五级地址不能为空', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请选择项目类别', trigger: 'change' }]
      }
    }
  },
  methods: {
    /**
     * 显示存储项目方法
     * @method handleShowDialog
     * @author liump
     */
    handleShowDialog() {
      this.outerVisible = true
    },
    /**
     * 外层确认按钮的方法
     * @method handleSubmit
     * @author liump
     */
    handleSubmit() {
      this.$refs.formAssessment.validate(valid => {
        if (valid) {
          // success 打开内层弹框,内层确认后上传数据
          this.innerVisible = true
        } else {
          return false
        }
      })
    },
    /**
     * 外层取消按钮方法
     * @method handleCancel
     * @author liump
     */
    handleCancel() {
      this.outerVisible = false
      this.$refs.formAssessment.resetFields()
    },
    /**
     * 内层上传数据的确认按钮
     * @method handleUpdate
     * @author liump
     */
    handleUpdate() {
      // 上传数据
      let success = res => {
        console.log(res)
      }
      let data = {}
      let param = {
        // TODO: 建项接口
        url: '',
        methods: 'post',
        data,
        success
      }
      this.$https(param)
    }
  }
}
</script>

<style scoped>
.amap-assessment .form-content {
  width: 70%;
}
</style>

<style>
.amap-assessment .el-upload-list__item:first-child {
  margin: 0;
}
.amap-assessment .el-upload-list__item {
  width: 300px;
}
</style>
